{include file="admin@public/header" /}

<style>
    body{background: #fff;}
    .wrapper {padding: 32px 58px 55px 58px;font-family: "Microsoft Yahei"}
    .mid-wrap{border:#EEEEEE 3px solid; border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px; position: relative; margin:6px 0 15px 0; padding:28px;}
    .mid-wrap-tit{ position: absolute; background: #ffffff;padding:3px 6px; left: 10px; top: -16px;}
    .uploadList p{display: inline-block;width: 93px;z-index: 999;font-size: 14px;line-height: 28px;height: 28px;background: #31be3b;color: #fff;text-align: center;border: 1px solid #00ab0c;border-radius: 2px;margin: 0 20px 0px 15px}
    #templateUrl{display: inline-block;width: 60px;z-index: 999;font-size: 14px;line-height: 28px;height: 28px;background: #31be3b;color: #fff;text-align: center;border: 1px solid #00ab0c;border-radius: 2px;margin: 0 20px 0px 15px}
    .uploadList input{cursor: pointer;direction: ltr;font-size: 0;margin: 0;opacity: 0;filter: alpha(opacity=0);position: absolute;left: 115px;height: 30px;line-height: 30px;width: 93px;vertical-align: middle;z-index: 1000;
    }
    #progress i{display:inline-block;float:left;margin-right:25px;width: 250px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-top: 5px;}
    #progress span{display:inline-block;}
    #progress .progressList{float:left;}
    .file-bar{width:240px;background:#eee;border-radius:2px;margin-top:10px;display: inline-block;margin-right: 20px;}
    .bar{height:9px;background:#31be3b;border-radius:2px;width:0px;}
    .progress-fail .bar{height:9px;background:#ff4800;border-radius:2px;width:0px;}
    #progress .err-icon{display:inline-block;width: 16px;height: 19px;background: url(/css/img/err-tips-icon.png)no-repeat;vertical-align: middle;}
    .ui-cus-dialog{position: fixed;width: 100%;right:0px;bottom: 0px;}
    .steps-ul li{display:inline-block;text-align: center;font-size: 15px;font-family: "Microsoft Yahei";color:#666;background: url(/public/static/admin/css/img/step.png);line-height: 35px;}
    .steps-ul .step1-base{width: 264px;}
    .steps-ul .step1-nol{background-position: -8px -94px;color:#666;}
    .steps-ul .step1-cur{background-position: -8px -137px;color: #fff}
    .steps-ul .step2-base{width: 245px;margin-left: -19px;}
    .steps-ul .step2-nol{background-position: -273px -94px;color:#666;}
    .steps-ul .step2-cur{background-position: -273px -137px;color: #fff;}
    .ctn p{margin-bottom: 15px;}
    .importDetail span{display: inline-block;margin-left: 15px;}
    #import-wrap .chk{padding-left: 24px;}

    .layui-form-radio>i:hover, .layui-form-radioed>i{color: #3cc3ee;}
</style>

<div class="wrapper">
  <ul class="steps-ul" id="import-steps" style="margin-bottom: 24px;">
      <li class="step1-base step1-cur" rel="step1">下载模板并填写</li>
      <li class="step2-base step2-nol" rel="step2">上传导入文件</li>
  </ul>
  
  <div id="import-wrap" class="layui-form cf">
      <div id="import-step1" class="step-item" style="display: block;">
          <div class="ctn"> 
            <p>
            	导入模板下载<a class="btn"></a>
            	<a id="templateUrl" href="#">下载</a>
            </p>
          </div>
          <div class="mid-wrap import">
          	<span class="mid-wrap-tit">导入说明</span>
          	<h4>填写excel模版</h4>
            <div id="templateCaption">
              <p>1）模板中红色字体的列为必录项；</p>
              <p>2）若填写了“本次收款”，则必须填写“结算账户”；</p>
              <p>3）商品信息只需录入商品编号（如该商品有属性，必须录入属性）；</p>
              <p>4）一张单据多条分录的导入格式请参考“演示模板”页签。</p>
            </div>
          </div>
      </div>

      <div id="import-step2" class="step-item" style="display: none;">
          <div class="uploadList"> 
								<label>上传文件:</label>
								<p>选择文件</p>
						    <input id="upfile" type="file" name="files[]" multiple="">
                <div id="classes" style="margin-top: 26px; margin-left: 21px; display: block;">
                  <span>导入单价是否含税：</span>
                  <input type="radio" name="classes" value="0" title="不含税" checked="">
                  <input type="radio" name="classes" value="1" title="含税">
                </div>
                
          </div>
          <ul id="progress" class="ul-inline file-import-ctn cf">
          	
          </ul>
          <div class="mid-wrap importDetail">
          	<span class="mid-wrap-tit">导入详情</span>
          	<p>新增数据:<span id="addMsg"></span></p>
          	<!-- <p>更新数据:<span id="updateMsg"></span></p> -->
          	<p>错误数据:<span id="errMsg"></span><span id="errFile" class="ml15"></span> </p>
          </div>
      </div>
  </div>
</div>

<div class="ui-cus-dialog" id="ui-cus-dialog">
  <div class="step-btns ui_buttons">
    <input type="button" value="下一步"  rel="step2" class="ui_state_highlight" onclick="switchs(2)">
    <input type="button" class="btn-close" value="关闭" onclick="closeBtn()">
  </div>
  <div class="step-btns ui_buttons"  style="display:none;">
    <input type="button" value="上一步"  rel="step1" onclick="switchs(1)">
    <input type="button" class="btn-close ui_state_highlight" value="完成" >
    <input type="button" class="btn-close" value="关闭" onclick="closeBtn()">
  </div>
</div>

<script>
  $(document).ready(function () {
    // 点击切换
    $("#import-steps>li").on("click",function(){
      var index=($(this).index())+1;
      switchs(index);
    });
  });


  // 点击切换
  function switchs(index){
    if(index==1){
        $(".step1-base").addClass("step1-cur");
        $(".step1-base").removeClass("step1-nol");
        $(".step2-base").removeClass("step2-cur");
        $(".step2-base").addClass("step2-nol");
      }else{
        $(".step2-base").addClass("step2-cur");
        $(".step2-base").removeClass("step2-nol");
        $(".step1-base").removeClass("step1-cur");
        $(".step1-base").addClass("step1-nol");
      }
      
      $("#ui-cus-dialog .step-btns").eq(index-1).show().siblings().hide();
      $("#import-wrap #import-step"+index).show().siblings().hide();
  }

  // 关闭弹窗
  function closeBtn(){
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index); //再执行关闭 
  }
</script>

{include file="admin@public/footer" /}